<template>
  <div>

        <div class='search-box' >
            <!-- 左侧白色区域  -->
            <div class="search">
               <!--  位置 -->
                <div class="location" >
                    <span class="name">上海</span>
                    <i class="iconfont icon-arrow" />
                </div>

               <!-- 搜索表单 -->
                <div class="form" >
                    <i class="iconfont icon-seach" />
                    <span class="text">请输入小区或地址</span>
                </div>
            </div>
           <!-- 右侧地图图标 -->
            <i class="iconfont icon-map"  />
        </div>

  </div>

</template>

<script>

export default {
  name: 'searchHeader',
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>

 <style lang="less" scoped>
 // 顶部导航
.search-box {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 25px;
    width: 93%;
    padding: 0 10px;
    // 左侧白色区域
    .search {
      display: flex;
       flex:1;
        height: 34px;
        margin: 0 10px;
        box-sizing: border-box;
        padding: 5px 5px 5px 8px;
        border-radius: 3px;
        background-color: #fff;
        // 位置
        .location {

            .icon-arrow {
                margin-left: 2px;
                font-size: 12px;
                color: #7f7f80;
            }
        }
        // 搜索表单
        .form {
            border-left: solid 1px #e5e5e5;
            margin-left: 12px;
            line-height: 23px;
            .icon-seach {
                vertical-align: middle;
                padding: 0 2px 0 12px;
                color: #9c9fa1;
                font-size: 15px;
            }
            .text {
                padding-left: 4px;
                font-size: 13px;
                color: #9c9fa1;
            }
        }
    }
    // 右侧地图图标
    .icon-map {
        font-size: 25px;
        color: #fff;
        line-height: 34px;
    }
}

 </style>
